<template>
	<view class="page">
		<!-- 搜索栏 -->
		<NavBar></NavBar>
		<!-- 轮播图 -->
		<Banner :banners="banners"></Banner>
		<!-- 圆环图标 -->
		<Menu :navbars="navbars"></Menu>
		<!-- 推荐歌单 -->
		<Recommend></Recommend>
		<!-- 电台-->
		<Radio></Radio>
		<!-- 独家放送-->
		<Sole></Sole>
		<!-- 推荐电台 -->
		<Selected></Selected>
		<!-- 播放组件 -->
		<view class="play">
			<Play></Play>
		</view>
	</view>
</template>

<script>
// 引入组件
import Banner from '@/components/Banner.vue';
import Menu from '@/components/Menu.vue';
//复用较多组件
import Recommend from '@/components/recommend.vue';
import NavBar from '@/components/NavBer.vue';
import Sole from '@/components/Sole.vue';
import Selected from '@/components/Selected.vue';
import Radio from '@/components/Radio.vue';
import Play from '@/components/plays.vue';

// 网络请求方法
import {
	getBanner, //获取轮播图
	getNavbarIcon, //获取圆环
	_getRadioStation,
	getHomeDragonBall
} from '@/http/home.js';

export default {
	data() {
		return {
			banners: [''], //轮播图数据获取
			navbars: '' // 导航条圆环
		};
	},
	components: {
		NavBar,
		Banner,
		Menu,
		Recommend,
		Radio,
		Sole,
		Selected,
		Play
	},
	onLoad() {
		this._getBanner();
		this._getNavbarIcon();
		// this.test()
	},
	methods: {
		//轮播图获取
		async _getBanner() {
			const { banners } = await getBanner();
			banners.forEach((item) => (item.image = item.imageUrl));
			this.banners = banners;
			console.log('123');
		},

		// 获取导航栏的圆环
		async _getNavbarIcon() {
			const res = await getHomeDragonBall();
			console.log(res);
			this.navbars = res.data;
			// console.log(this.navbars);
		}
	}
};
</script>
 
<style>
.page {
	background-color: #f6f6f6;
	font-family: STXihei;
}

.play {
	position: fixed;
	/* bottom:var(--window-bottom + 30px); */
	bottom: 0;
	z-index: 2;
	width: 100%;
}
</style>
<style lang="scss" scoped>
@import './index.scss';
</style>
